<template>
  <div>
    <!-- {{ skuLists.result }} -->
    <!-- 头部 -->
    <el-card class="box-card">
      <!-- 布局 搜索按钮 -->
      <el-row :gutter="20">
        <el-col :span="2"
          ><div class="grid-content bg-purple">
            <i class="el-icon-search">筛选搜索</i>
          </div></el-col
        >
        <el-col :span="20"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="2"
          ><div class="grid-content bg-purple">
            <el-button type="primary" @click="seleSkuByName"
              >查询结果</el-button
            >
          </div></el-col
        >
      </el-row>
      <!--  -->

      <!-- 布局 搜索框 -->
      <el-row :gutter="20">
        <el-col :span="1"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            输入搜索：<el-input
              placeholder="请输入品牌完整名称"
              style="width:250px;"
              v-model="keyword"
              @change="keysupd"
            ></el-input></div
        ></el-col>
        <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
      </el-row>
    </el-card>
    <!-- 主体 -->
    <el-card class="box-card1">
      <el-row :gutter="20">
        <el-col :span="2"
          ><div class="grid-content bg-purple">
            <i class="el-icon-tickets">数据列表</i>
          </div></el-col
        >
        <el-col :span="20"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="2"
          ><div class="grid-content bg-purple" style="float:right">
            <el-button @click="changeAddList">添加</el-button>
          </div></el-col
        >
      </el-row>
      <!-- </el-card> -->
      <!-- 表单 :data="tableData"-->
      <el-table
        border
        :data="skuList.result"
        style="width: 100%;margin-top:20px;"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="80px"
          header-align="center"
          align="center"
        >
        </el-table-column>

        <el-table-column
          type="index"
          label="编号"
          width="100px"
          header-align="center"
          align="center"
        >
        </el-table-column>

        <el-table-column
          prop="trade"
          label="品牌名称"
          width="250px"
          header-align="center"
          align="center"
        >
        </el-table-column>

        <!-- <el-table-column
          prop="name"
          label="品牌首字母"
          width=""
          header-align="center"
        >
        </el-table-column> -->

        <el-table-column
          prop="brandId"
          label="排序"
          width=""
          header-align="center"
          align="center"
        >
        </el-table-column>

        <el-table-column
          prop="code"
          label="品牌制造商"
          width="120px"
          header-align="center"
          align="center"
        >
          <template slot-scope="{ row }">
            <el-switch v-model="row.code" @change="changeSwitch($event, row)">
            </el-switch>
          </template>
        </el-table-column>

        <el-table-column
          prop=""
          label="操作"
          header-align="center"
          align="center"
        >
          <template slot-scope="{ row }">
            <el-button @click="changeEditList(row._id)" :id="row._id"
              >编辑</el-button
            >
            <el-button type="danger" @click="deleSkuById(row._id)" :id="row._id"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- </el-card> -->

      <!-- 分页器 -->
      <!-- <el-card class="box-card1"> -->

      <el-row style="margin-top:20px;">
        <div class="grid-content bg-purple-light">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[5, 10, 15]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="skuList.total"
          >
          </el-pagination>
        </div>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "SKU",
  data() {
    return {
      keyword: "", //搜索关键字
      keyword: "", //搜索关键字
      value: "", //批量操作下拉框 选中的值
      is_show: "", //品牌制造商
      is_show1: "", //是否显示
      page: 1, //页码
      limit: 5 //显示数量
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    // 表单复选框
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 分页
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.limit = val;
      this.getData();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.page = val;
      this.getData();
    },
    //
    async changeSwitch(aaa, row) {
      console.log(row.code);
      let id = row._id;
      let data = row.code;
      let result = await this.$API.mockChangeState(id, data);
      if (result.status == 200) {
        this.$message({
          type: "success",
          message: "修改成功!"
        });
      } else {
        alert("阿哦！请求出错了,请检查网络后重试");
      }
    },
    // 添加商品属性
    changeAddList() {
      this.$router.push({
        path: "/sku/addlist"
      });
    },
    // 编辑商品属性
    changeEditList(e) {
      console.log(e);
      this.$router.push({
        path: "/sku/editlist?skuId=" + e
      });
    },
    // 删除
    async deleSkuById(e) {
      console.log(e);

      try {
        const results = await this.$API.mockDeleSku(e);
        // console.log(results);
        if (results.status == 200) {
          this.$message({
            message: "恭喜你，删除信息成功！",
            type: "success"
          });
          this.getData();
        }
      } catch (err) {
        this.$message.error("删除失败！请刷新后重试！");
      }
    },
    // 获取sku信息
    getData() {
      const { page, limit } = this;
      this.$store.dispatch("getSkuData", { limit, page });
    },
    // 查询数据
    seleSkuByName() {
      const { keyword } = this;
      if (!keyword.trim()) {
        this.page = 1;
        this.limit = 5;
        this.getData();
      } else {
        this.$store.dispatch("seleSku", keyword);
      }
    },
    //按回车，查询
    keysupd() {
      this.seleSkuByName();
    }
  },
  computed: {
    ...mapState({
      skuList: state => state.sku.skuList
    })
  }
};
</script>

<style lang="less" scoped>
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  line-height: 36px;
  float: right;
}
.box-card1 {
  margin-top: 20px;
}
</style>
